<template>
  <div class="user-card">
    <div class="card-header">
      <h3 class="card-title">个人信息</h3>
      <p class="card-subtitle">查看和编辑您的基本信息</p>
    </div>

    <div class="user-content">
      <div class="user-avatar-section">
        <div class="avatar-wrapper">
          <el-avatar :size="100" :src="avatarUrl" class="user-avatar">
            <span>{{ userInitial }}</span>
          </el-avatar>
          <div class="avatar-badge" @click="triggerFileUpload" :class="{ uploading: uploadingAvatar }">
            <el-icon v-if="!uploadingAvatar"><Camera /></el-icon>
            <el-icon v-else class="is-loading"><Loading /></el-icon>
          </div>
          <input type="file" ref="fileInputRef" accept="image/jpeg,image/jpg,image/png,image/gif" style="display: none" @change="handleFileChange" :disabled="uploadingAvatar" />
        </div>
        <h3 class="username">{{ userInfo.username || "testuser" }}</h3>
      </div>

      <div class="user-details">
        <div class="detail-item">
          <div class="detail-icon">
            <el-icon><User /></el-icon>
          </div>
          <div class="detail-content">
            <span class="label">用户名</span>
            <span class="value">{{ userInfo.username || "testuser" }}</span>
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-icon">
            <el-icon><Message /></el-icon>
          </div>
          <div class="detail-content">
            <span class="label">邮箱</span>
            <span class="value">{{ userInfo.email || "test@example.com" }}</span>
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-icon">
            <el-icon><Phone /></el-icon>
          </div>
          <div class="detail-content">
            <span class="label">手机</span>
            <span class="value">{{ userInfo.phone || "138****8888" }}</span>
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-icon">
            <el-icon><Key /></el-icon>
          </div>
          <div class="detail-content">
            <span class="label">角色</span>
            <span class="value">{{ userInfo.role || "用户" }}</span>
          </div>
        </div>
      </div>

      <div class="join-date">
        <el-icon><Clock /></el-icon>
        <span>注册于 {{ userInfo.createTime || "2024-01-01" }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue"
import { ElMessage } from "element-plus"
import { Camera, Clock, Key, Loading, Message, Phone, User } from "@element-plus/icons-vue"
import { getUserAvatarInfo } from "@/utils/ui/avatar"
import { uploadAvatar } from "@/api/modules/user"

const props = defineProps({
  userInfo: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(["avatar-uploaded"])

const uploadingAvatar = ref(false)
const fileInputRef = ref(null)

const avatarInfo = computed(() => getUserAvatarInfo(props.userInfo))
const userInitial = computed(() => avatarInfo.value.userInitial)
const avatarUrl = computed(() => avatarInfo.value.avatarUrl)

const triggerFileUpload = () => {
  fileInputRef.value?.click()
}

const handleFileChange = async event => {
  const file = event.target.files[0]
  if (!file) return

  const allowedTypes = ["image/jpeg", "image/jpg", "image/png", "image/gif"]
  if (!allowedTypes.includes(file.type)) {
    ElMessage.error("只支持 JPG、PNG、GIF 格式的图片")
    event.target.value = ""
    return
  }

  const maxSize = 5 * 1024 * 1024
  if (file.size > maxSize) {
    ElMessage.error("图片大小不能超过 5MB")
    event.target.value = ""
    return
  }

  try {
    uploadingAvatar.value = true
    const response = await uploadAvatar(file)

    if (response.code === 200) {
      emit("avatar-uploaded", response.data)
      ElMessage.success("头像上传成功")
    } else {
      ElMessage.error(response.message || "头像上传失败")
    }
  } catch (error) {
    console.error("头像上传失败:", error)
    ElMessage.error("网络错误，请稍后重试")
  } finally {
    uploadingAvatar.value = false
    event.target.value = ""
  }
}
</script>

<style lang="scss" scoped>
@use "@/styles/base/variables" as *;
@use "@/styles/base/mixins" as *;

.user-card {
  @include theme-card;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: $box-shadow-base;
  }

  .card-header {
    background: $bg-color-hover;
    border-bottom: 1px solid $border-color-lighter;
    padding: 1.25rem;
    text-align: center;

    .card-title {
      font-size: 1.1rem;
      font-weight: 600;
      margin: 0 0 0.25rem 0;
    }

    .card-subtitle {
      font-size: 0.85rem;
      opacity: 0.9;
      margin: 0;
    }
  }

  .user-content {
    padding: 1.5rem;
  }

  .user-avatar-section {
    text-align: center;
    margin-bottom: 1.5rem;

    .avatar-wrapper {
      position: relative;
      display: inline-block;
      margin-bottom: 0.75rem;

      .user-avatar {
        border: 3px solid $color-primary-light-8;
        box-shadow: $box-shadow-sm;
        font-size: 2rem;
        font-weight: 600;
        background: linear-gradient(135deg, $color-primary-light-3, $color-primary);
        color: white;
        transition: all 0.2s ease;

        &:hover {
          transform: scale(1.02);
        }
      }

      .avatar-badge {
        position: absolute;
        bottom: 2px;
        right: 2px;
        width: 28px;
        height: 28px;
        background: $color-primary;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        cursor: pointer;
        border: 2px solid $bg-color-white;
        font-size: 0.9rem;
        transition: all 0.2s ease;
        box-shadow: $box-shadow-sm;

        &:hover:not(.uploading) {
          transform: scale(1.05);
          box-shadow: $box-shadow-base;
        }

        &.uploading {
          cursor: not-allowed;
          opacity: 0.7;
        }

        .is-loading {
          animation: rotating 2s linear infinite;
        }
      }

      @keyframes rotating {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
    }

    .username {
      font-size: 1.25rem;
      font-weight: 600;
      color: $color-text-primary;
      margin: 0;
    }
  }

  .user-details {
    .detail-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 0;
      border-bottom: 1px solid $border-color-lighter;
      transition: all 0.2s ease;

      &:last-child {
        border-bottom: none;
      }

      &:hover {
        background: $bg-color-hover;
        border-radius: 6px;
        margin: 0 -0.5rem;
        padding: 0.75rem 0.5rem;
      }

      .detail-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: $color-primary-light-9;
        display: flex;
        align-items: center;
        justify-content: center;
        color: $color-primary;
        font-size: 1rem;
        flex-shrink: 0;
      }

      .detail-content {
        flex: 1;

        .label {
          font-size: 0.8rem;
          color: $color-text-secondary;
          font-weight: 500;
          display: block;
          margin-bottom: 0.125rem;
        }

        .value {
          font-size: 0.9rem;
          color: $color-text-primary;
          font-weight: 600;
          word-break: break-all;
        }
      }
    }
  }

  .join-date {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid $border-color-lighter;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: $color-text-quaternary;
    font-size: 0.875rem;
    font-weight: 500;

    .el-icon {
      font-size: 1rem;
    }
  }
}
</style>
